<template>
	<div class="middle-video-info-box">
		<div class="box-left">
			<span class="back" v-if="isShowClose" @click="back">
			    <Iconfont iconClass="iconfont iconyoujiantou1 arrow"/>
		     </span>
			<span class="tittle"> {{videoInfo.videoInfo.title||'-'}}</span>
		</div>
		<div class="message-box">
			<span class="message-box-people">
				<span class="people-icon"></span>
			<span class="number">{{videoInfo.fwCount|| 0 | filterPvNum(1)}}</span>
			</span>
			<span class="message-box-info">
				<span class="info-icon"></span>
			<span class="number">{{videoInfo.hdCount || 0 | filterPvNum(2)}}</span>
			</span>
		</div>
		<div class="attention-box" @click="clickHeader('attention')" :class="[isAttention?'attention-btn-gray':'attention-btn']">
			{{isAttention?'已关注':'关注'}}
		</div>
	</div>
</template>

<script>
	import { getIsAttentionFun, getFollowState, cancelFollowSpecialColumn, followSpecialColumn } from '@/util/api.js'
	export default {
		props: {
			videoInfo: Object,
			videoId: String,
		},
		filters:{
			filterPvNum:function(type,fixed){
             if(typeof type == "undefined"){
             	return 0
             }else if(type < 10000) {
					return type
				} else {
					return(type / 10000).toFixed(fixed) + "w";
				}
		     },
		},		
		data() {
			return {
				isShowClose: true, //返回按钮
				isAttention:false,
			}
		},
	    async	created() {
			const liveStation = this.$route.query.liveStation === '1';
			liveStation ? this.liveStationGetAttention() : this.getcheckAttention();
			const source = sessionStorage.getItem('source');
            const plat = await fun.initSourcePlat();
			if(source === 'hly_mini' && plat === 'mini'){
                this.isShowClose = false;
			}  
		},
		mounted() {},
		methods: {
		async liveStationGetAttention(){ // 直播小站查询是否关注
			try {
				const { videoInfo: { creator } } = this.videoInfo;
				const res = await getFollowState(creator, 6);
				this.isAttention = res.data.data;
				} catch (error) {
				throw new Error(error)
				}
			},
		async getcheckAttention(){
			const {videoInfo:{creator}} = this.videoInfo;
			const isattention = await getIsAttentionFun(creator);
			this.isAttention = isattention.data.data;
		},//判断是否关注
		clickHeader(clickType) {
			const liveStation = this.$route.query.liveStation === '1';
			switch (clickType) {
				case 'attention':
				if (this.$store.state.isYk) { //游客
					fun.ykDisposeFun();
					return
				} 
				liveStation ? this.liveStationAttention() : this.isAttention = fun.LiveAttentionFun(this.isAttention, this.videoInfo.videoInfo.creator);
				break;
			default:
				break;
			}
		},
		async liveStationAttention(){
      const { videoInfo: { creator } } = this.videoInfo;
      if (this.isAttention) {
        try {
          const res = await cancelFollowSpecialColumn(creator, 6)
          const { code, data, msg } = res.data;
          if (code === '000000') {
            this.isAttention = false;
          } else {
            fun.toastMessage(msg);
          }
        } catch (error) {
          throw new Error(error);
        }
      } else {
        try {
          const res = await followSpecialColumn(creator, 6);
          const { code, data, msg } = res.data;
          if (code === '000000') {
            this.isAttention = true;
          } else {
            fun.toastMessage(msg);
          }
        } catch (error) {
          throw new Error(error);
        }
      }
    },
		// 返回到首页
		back() {
			fun.liveBackFun();
			return
			const _this = this;
			const str = _this.$route.meta.refer;
			setTimeout(function () {
				if (str && (str.includes("liveRoom") || str.includes("liveBack"))) { //说明上一个页面是直播间过来的 跳转到首页
					_this.$router.replace({
						path: `/${_this.$channel}/home`
					})
				} else {
					if (window.history.length <= 1) {//判断路由是否没有上级 如果没有强制跳转到首页
						_this.$router.replace({
							path: `/${_this.$channel}/home`
						})
					} else {
						_this.$router.go(-1)
					}
				}
			}, 216);
		},

		}
	}
</script>

<style scoped="scoped" lang="less">
	.middle-video-info-box {
		width: 100vw;
		height: 70px;
		padding: 0 20px;
		background: white;
		border-bottom: 1px solid rgba(231, 231, 231, 1);
		display: flex;
		justify-content: space-between;
	}
	
	.middle-video-info-box .box-left {
		display: flex;
		align-items: center;
		width: 350px;
	}
	
	.middle-video-info-box .back {
		transform: rotate(180deg);
		margin-right: 20px;
	}
	
	.middle-video-info-box span {
		font-size: 28px;
	}
	
	.middle-video-info-box .back .arrow {
		font-size: 27px;
	}
	
	.tittle {
		flex: 1;
		color: #222;
		line-height: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 265px;
	}
	
	.message-box {
		display: flex;
	}
	
	.message-box-people,
	.message-box-info {
		text-align: center;
		min-width: 100px;
	}
	
	.message-box-people .people-icon {
		display: inline-block;
		width: 24px;
		height: 30px;
		background: url(../../../../assets/images/icon2.png) no-repeat center center;
		background-size: 150px 288px;
		background-position: -30px -222px;
		margin: 16px 0 0 0;
	}
	
	.message-box-info .info-icon {
		display: inline-block;
		width: 27px;
		height: 28px;
		background: url(/static/img/icon2.6fa8c0b.png) no-repeat;
		background-size: 148px 288px;
		background-position: -60px -222px;
		margin: 18px 2px 0 0;
	}
	
	.number {
		color: #B2B2B2;
	}
	.attention-box {
		/* width: 130px; */
		margin-left: 10px;
		height: 70px;
		margin-right: 5px;
		/*background: forestgreen;*/
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 4px;
		flex-shrink: 0;
	}
	.attention-btn-gray {
		width: 110px;
		height: 60px;
		background: #acacac;
		color: white;
		text-align: center;
		line-height: 60px;
		border-radius: 60px;
		font-size: 26px;
	}
	.attention-btn {
		width: 110px;
		height: 60px;
		background: rgb(204, 53, 56);
		color: white;
		text-align: center;
		line-height: 60px;
		border-radius: 60px;
		font-size: 26px;
	}
</style>